<template>
    <div>
        <div>
            <div class="addInitRotationLocation">
                <div style="float: left;display: flex;">
                    <el-input
                            @clear="insertRotationLocation_Clear"
                            clearable
                            style="margin-right: 8px;"
                            class="insertRotationLocation"
                            prefix-icon="el-icon-search"
                            placeholder="请输入标题关键字"
                            v-model="rotationLocationPageParamVO.titleKey"
                            @keydown.enter.native="initRotationLocationQuery">
                    </el-input>
                    <el-button style="margin-left: 8px;" icon="el-icon-search" type="info" @click="initRotationLocationQuery">查询</el-button>
                </div>
                <div style="display: flex;justify-content: flex-end">
                    <el-button
                            type="primary"
                            @click="insertRotationLocation"><i class="el-icon-add-location"></i><span>新增运营位</span>
                    </el-button>
                </div>
            </div>
            <!-- 列表 -->
        <div>
            <el-table
                    :data="RotationLocationList"
                    border
                    v-loading="loading"
                    element-loading-text="正在加载..."
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.8)"
                    >
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        label="运营位编号"
                        width="250">
                    <template slot-scope="scope">
                        <span>{{ scope.row.locationId }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="主标题"
                        width="250">
                    <template slot-scope="scope">
                        <span>{{ scope.row.mainTitle }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="副标题"
                        width="250">
                    <template slot-scope="scope">
                        <span>{{ scope.row.subTitle }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="大小尺寸"
                        width="250">
                    <template slot-scope="scope">
                        <span>{{ scope.row.rotationSize }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="维护人员"
                        width="150">
                    <template slot-scope="scope">
                        <span>{{ scope.row.realName }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="创建时间"
                        width="250">
                    <template slot-scope="scope">
                        <span>{{ scope.row.createTime | dateFormat('YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                @click="updateRotationLocation(scope.row)"><i class="el-icon-edit">编辑</i></el-button>
                        <el-button
                                type="danger"
                                title="逻辑删除"
                                @click="deleteRotationLocation(scope.row)"><i class="el-icon-delete">删除</i></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="display: flex;justify-content: flex-end;margin-top: 8px;">
                <el-pagination
                        background
                        @current-change="currentChange"
                        @size-change="sizeChange"
                        layout="sizes, prev, pager, next, jumper, ->, total, slot"
                        :total="total">
                </el-pagination>
            </div>
        </div>
        </div>
        <div>
            <el-dialog
                :title="dialogtitle"
                :visible.sync="dialogVisible"
                width="60%">
                <el-form :model="RotationLocationInfo" :rules="rules" ref="RotationLocationInfoForm">
                        <el-row>
                            <el-col>
                                <el-form-item label="主标题:" prop="mainTitle">
                                    <el-input style="margin-left: -163px;width: 850px;" clearable prefix-icon="el-icon-edit" v-model="RotationLocationInfo.mainTitle" placeholder="请输入主标题"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col>
                                <el-form-item label="副标题:" prop="subTitle">
                                    <el-input style="margin-left: -163px;width: 850px;" clearable prefix-icon="el-icon-edit" v-model="RotationLocationInfo.subTitle" placeholder="请输入副标题"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col>
                                <el-form-item label="尺寸阈:" prop="rotationSize">
                                    <el-input style="margin-left: -163px;width: 850px;" clearable prefix-icon="el-icon-edit" v-model="RotationLocationInfo.rotationSize" placeholder="请输入大小尺寸"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="insertRotationLocationRequest">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>

export default {
    name:"RotationLocation",
    data(){
        return{
            loading: false,
            RotationLocationList:[],
            total: 0,
            rotationLocationPageParamVO:{
              titleKey:'',
              pageNum: 1,
              pageSize: 10
            },
            dialogtitle:'',
            dialogVisible:false,
            RotationLocationInfo:{
                locationId:'',
                mainTitle:'',
                rotationSize:'',
                subTitle:''
            },
            // 校验规则
            rules: {
                mainTitle:[{required:true,message:'请输入主标题',trigger:'blur'}],
                rotationSize:[{required:true,message:'请输入大小尺寸',trigger:'blur'}],
                subTitle:[{required:true,message:'请输入副标题',trigger:'blur'}]
            },
        }
    },
    mounted(){
        // 初始化运营位列表
        this.initRotationLocationQuery();
    },
    methods:{
        // 清空查询条件
        insertRotationLocation_Clear(){
          this.rotationLocationPageParamVO.titleKey = '';
          this.initRotationLocationQuery();
        },
        initRotationLocationQuery(){
            this.loading = true;
            this.postRequest("/rotation/RotationLocation/query/RotationLocationPageList",this.rotationLocationPageParamVO).then(resp => {
                this.loading = false;
                if (resp) {
                    this.RotationLocationList = resp.data.list;
                    this.total = resp.data.total;
                }
            });
        },
        updateRotationLocation(data){
            this.dialogtitle = "编辑运营位";
            this.dialogVisible = true;
            this.RotationLocationInfo.locationId = data.locationId;
            this.RotationLocationInfo.mainTitle = data.mainTitle;
            this.RotationLocationInfo.subTitle = data.subTitle;
            this.RotationLocationInfo.rotationSize = data.rotationSize;
        },
        deleteRotationLocation(data){
            this.$confirm('此操作将永久删除【'+data.mainTitle+'】, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest('/rotation/RotationLocation/delete/RotationLocation?locationId='+data.locationId).then(resp=>{
                        if (resp){
                            this.initRotationLocationQuery();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                });
            });
        },
        insertRotationLocation(){
            this.dialogtitle = "新增运营位";
            this.initRotationLocationInfo();
            this.dialogVisible = true;
        },
        initRotationLocationInfo(){
            this.RotationLocationInfo.locationId = '';
            this.RotationLocationInfo.mainTitle = '';
            this.RotationLocationInfo.rotationSize = '';
            this.RotationLocationInfo.subTitle = '';
        },
        // 分页
        sizeChange(currentSize) {
            this.rotationLocationPageParamVO.pageSize = currentSize;
            this.initRotationLocationQuery();
        },
        currentChange(currentPage) {
            this.rotationLocationPageParamVO.pageNum = currentPage;
            this.initRotationLocationQuery();
        },
        insertRotationLocationRequest(){
            if (this.RotationLocationInfo.locationId) {
                    this.$refs['RotationLocationInfoForm'].validate(valid => {
                        if (valid) {
                            this.putRequest("/rotation/RotationLocation/update/RotationLocation", this.RotationLocationInfo).then(resp => {
                                if (resp) {
                                    this.dialogVisible = false;
                                    this.initRotationLocationQuery();
                                    this.initRotationLocationInfo();
                                }
                            })
                        }
                    });
            } else {
                this.$refs['RotationLocationInfoForm'].validate(valid => {
                    if (valid) {
                        this.postRequest("/rotation/RotationLocation/insert/RotationLocation", this.RotationLocationInfo).then(resp => {
                            if (resp) {
                                // 关闭弹框
                                this.dialogVisible = false;
                                // 初始化列表
                                this.initRotationLocationQuery();
                                // 初始化弹框值
                                this.initRotationLocationInfo();
                            }
                        })
                    }
                });
            }
        }
    }
}
</script>

<style>
    .insertRotationLocation{
        width: 300px;margin-right: 8px;
    }
    .addInitRotationLocation{
        margin-bottom: 10px;
    }
</style>
